<template>
	<view class="commentList">
		<ul>
			<li v-for="(item,index) in commentList">
				<!-- 评论头部 -->
				<view class="commentUserInfo">
					<view class="commentTitle">
						<image :src="item.userPic"></image>
						<view class="commentUserName">
							<view>{{item.username}}</view>
							<view>
								<i class="icon">&#9733;&#9733;&#9733;&#9733;&#9733;</i>
							</view>
						</view>
					</view>
					<view class="commentTime"> {{item.time}}</view>

				</view>
				<!-- 评论的内容 -->
				<view class="commentContent">
					{{item.content}}
				</view>
				<!-- 评论附加图片部分 -->
				<view class="commentPic">
			<li v-for="(it,index) in item.commentList_price">
				<image :src="it.pic"></image>
			</li>
	</view>

	</li>
	</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commentList: [{
						userPic: '../../static/image/mine/discount/header02.png',
						username: '安徒生',
						time: ' 2019-10-15 10:23:23',
						content: '苹果包装很好，很甜很好吃，下次还会继续光顾的，很实惠，希望卖家生意兴隆',
						commentList_price: [{
								pic: '../../static/image/mine/index/canvas_product.png'
							},
							{
								pic: '../../static/image/mine/index/canvas_product.png'
							}
						]

					},
					{
						userPic: '../../static/image/mine/discount/header03.png',
						username: '安徒生',
						time: ' 2019-10-15 10:23:23',
						content: '苹果包装很好，很甜很好吃，下次还会继续光顾的，很实惠，希望卖家生意兴隆',
						commentList_price: []

					},
					{
						userPic: '../../static/image/mine/discount/header01.png',
						username: '安徒生',
						time: ' 2019-10-15 10:23:23',
						content: '苹果包装很好，很甜很好吃，下次还会继续光顾的，很实惠，希望卖家生意兴隆',
						commentList_price: [{
								pic: '../../static/image/mine/index/canvas_product.png'
							},
							{
								pic: '../../static/image/mine/index/canvas_product.png'
							},
							{
								pic: '../../static/image/mine/index/canvas_product.png'
							},
							{
								pic: '../../static/image/mine/index/canvas_product.png'
							},
							{
								pic: '../../static/image/mine/index/canvas_product.png'
							}

						]

					}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.commentList {
		ul {
			padding: 0;
			margin: 0;

			li {
				list-style: none;
				font-size: 28upx;
				padding-top: 15upx;
				padding-bottom: 20upx;
				border-bottom: 1upx solid #868686;
				&:last-child{
					border: none;
				}
			}
		}

		li {

			// 评论的头部
			.commentUserInfo {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10upx;

				.commentTitle {
					display: flex;
					justify-content: flex-start;
				}

				image {
					width: 70upx;
					height: 70upx;
					vertical-align: middle;
				}

				.commentUserName {
					margin-left: 15upx;
					font-weight: 700;
					font-size: 26upx;
				}

				.commentTime {
					font-size: 22upx;
					color: #868686;
				}

			}

			//评论的内容
			.commentContent {
				font-size: 26upx;
				margin: 15upx 0;
			}

			// 评论附加图片部分
			.commentPic {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				li {
					width: 24%;
					border: none;
				}

				image {
					width: 160upx;
					height: 160upx;
				}
			}
		}
	}
</style>
